<template>
	<view>
		<cu-custom :isBack="true" :showLeftIcon="false" leftIcon="list" @leftBtnClick="sortMenu.showActionSheet=true">
			<block slot="backText">返回</block>
			<block slot="content">{{isPublishChoose?'公众号选择':'公众号收录'}}</block>
		</cu-custom>
		<!-- 分类模式 -->
		<view v-if="sortMenu.showType==1">
			<scroll-view
				scroll-y
				:scroll-with-animation="categoryMode.isTap"
				scroll-anchoring
				class="tab-view"
				:scroll-into-view="categoryMode.scrollView_leftId"
				:style="{ height: categoryMode.height + 'px', top: categoryMode.top + 'px' }"
			>
				<view
					:id="`left_${index}`"
					v-for="(item, index) in categoryList"
					:key="index"
					class="tab-bar-item"
					:class="[categoryMode.currentTab == index ? 'active' : '']"
					:data-current="index"
					@tap.stop="swichNav"
				>
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
			<scroll-view
				@scroll="scroll"
				scroll-anchoring
				scroll-y
				scroll-with-animation
				class="right-box"
				:scroll-into-view="categoryMode.scrollView_rightId"
				:style="{ height: categoryMode.height + 'px', top: categoryMode.top + 'px' }"
			>
				<!--内容部分 start 自定义可删除-->
				<block v-for="(category, index) in categoryList" :key="index">
					<t-linkage :distanceTop="categoryMode.distanceTop" :recalc="1" :scrollTop="scrollTop" :index="index" @linkage="linkage">
						<view class="page-view" :id="`right_${index}`">
							<view class="class-box">
								<view class="class-item">
									<view class="class-name">{{ category.name }}</view>
									<view v-if="category.items==null||category.items.length==0">
										<view class="flex align-start justify-start" style="flex-direction: column;">
											<text class="text-grey padding-top">暂未收录相关的优质公众号</text>
											<view class="flex justify-between align-center padding-top-xs" style="width: 100%;">
												<text class="text-grey">我有公众号推荐</text>
												<view @tap="jumpToAdvice()" class="padding-left-sm flex justify-end align-center" style="min-width: 100upx;">
													<text class="text-blue" style="min-width: 80upx;">去推荐<text class="cuIcon-right text-gray"></text></text>
												</view>
											</view>
										</view>
									</view>
									<view v-else>
										<view v-for="(subItem,subIndex) in category.items" :key="subIndex">
											<view v-if="isPublishChoose" @tap="chooseOfficialAccount(subItem)" class="flex justify-between align-start solid-bottom padding-top-sm padding-bottom-sm">
												<view style="width: 100upx;height: 100upx;">
													<image class="radius" :src="subItem.icon" style="width: 100upx;height: 100upx;"></image>
												</view>
												<view class="flex justify-start align-start padding-left-sm" style="flex-direction: column;">
													<text class="text-bold text-lg">{{subItem.name}}</text>
													<text class="text-grey text-df">{{subItem.introduce}}</text>
												</view>
											</view>
											<view v-else @tap="jumToOfficialAccount(subItem)" class="flex justify-start align-start solid-bottom padding-top-sm padding-bottom-sm">
												<view style="width: 100upx;height: 100upx;">
													<image class="radius" :src="subItem.icon" style="width: 100upx;height: 100upx;"></image>
												</view>
												<view class="flex justify-start align-start padding-left-sm" style="flex-direction: column;">
													<text class="text-bold text-lg">{{subItem.name}}</text>
													<text class="text-grey text-df">{{subItem.introduce}}</text>
												</view>
											</view>
										</view>
										<view class="flex justify-between align-center padding-top-xs">
											<text class="text-grey">我有公众号推荐</text>
											<view @tap="jumpToAdvice()" class="padding-left-sm flex justify-end align-center" style="min-width: 100upx;">
												<text class="text-blue" style="min-width: 80upx;">去推荐<text class="cuIcon-right text-gray"></text></text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</t-linkage>
				</block>
				<!--内容部分 end 自定义可删除-->
			</scroll-view>
		</view>
		<view v-else-if="sortMenu.showType==2">
			<view class="cu-list grid" :class="['col-' + gridCol]">
				<view class="cu-item" v-for="(item,index) in gridList" :key="index">
					<view @tap="jumToOfficialAccount(item)" class="flex align-center justify-center" style="flex-direction: column;">
						<image class="radius" :src="item.icon" style="width: 144upx;height: 144upx;"></image>
						<text class="text-cut text-black">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="sortMenu.showType==3">
			<view v-for="(item,index) in gridList" :key="index">
				<view class="cu-card article">
					<view @tap="jumToOfficialAccount(item)" class="cu-item">
						<view class="flex justify-start align-top padding-left padding-top padding-right" style="width: 100%;">
							<view style="width: 120upx;height: 120upx;">
								<image mode="aspectFill" :src="item.icon" class="radius" style="width: 120upx;height: 120upx;"></image>
							</view>
							<view class="flex justify-between align-center padding-left-sm" style="width: 100%;">
								<view class="flex justify-start align-start" style="flex-direction: column;">
									<text class="text-black text-bold text-lg padding-bottom-xs">{{item.name}}</text>
									<text class="text-grey text-df">{{item.introduce}}</text>
								</view>
								<text class="text-gray cuIcon-right"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tui-actionsheet :show="sortMenu.showActionSheet" :tips="sortMenu.tips" :item-list="sortMenu.itemList"
			:mask-closable="sortMenu.maskClosable" :color="sortMenu.color" :size="sortMenu.size"
			:is-cancel="sortMenu.isCancel" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
	</view>
</template>

<script>
	import {
		saveOfficialAccountListMode,
		getOfficialAccountListMode
	} from '@/api/statusCache.js'
	import {
		getOfficialAccountList,
		markOfficialAccountUsed
	} from '@/api/api.js'
	import {
		isLogin
	} from '@/api/auth.js'
	import {
		checkLogin
	} from '@/js_sdk/checkLogin.js'
	import tLinkage from '@/components/views/t-linkage/t-linkage';
	export default {
		components: {
			tLinkage
		},
		data() {
			return {
				showLeftIcon:true,
				isPublishChoose:false,
				sortMenu: {
					showType: 1,
					showActionSheet: false,
					maskClosable: true,
					itemList: [{
							text: "分类模式",
							color: "#2B2B2B"
						},
						{
							text: "宫格模式",
							color: "#2B2B2B"
						},
						{
							text: "列表模式",
							color: "#2B2B2B"
						}
					],
					color: "#9a9a9a",
					size: 26,
					isCancel: true
				},
				categoryList:[],
				gridList:[],
				gridCol:3,
				categoryMode:{
					height: 0, //scroll-view高度
					top: 0,
					currentTab: 0, //预设当前项的值
					scrollView_leftId: 'left_0',
					scrollView_rightId: 'right_0',
					scrollTop: 0,
					distanceTop: this.CustomBar,
					isScroll: true,
					isTap: true
				}
			}
		},
		onLoad(options) {
			if(options.isPublish !== null && options.isPublish !== undefined) {
				this.isPublishChoose = true
				this.showLeftIcon = false
				this.sortMenu.showType = 1
			}
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						let header = this.CustomBar;
						let top = 0;
						this.categoryMode.height = res.windowHeight - header;
						this.categoryMode.top = top + header;
					}
				});
			}, 50);
			this.initOfficialAccountList()
		},
		created() {
			let showType = getOfficialAccountListMode()
			if (showType == null || showType == undefined || showType == "") {
				this.sortMenu.showType = 1
			} else {
				this.sortMenu.showType = showType
			}
		},
		methods: {
			chooseOfficialAccount(item) 
			{
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('finishChoose', item);
				uni.navigateBack({
					delta:1
				})
			},
			closeActionSheet: function() {
				this.sortMenu.showActionSheet = false
			},
			itemClick: function(e) {
				let showType = e.index + 1;
				this.sortMenu.showType = showType;
				saveOfficialAccountListMode(showType)
				this.closeActionSheet();
			},
			jumpToAdvice() 
			{
				if(isLogin() == false) {
					checkLogin()
					return
				}
				uni.navigateTo({
					url:'/pages/lessuse/advice/advice?isRecommend=2'
				})
			},
			jumToOfficialAccount(item) 
			{
				uni.showModal({
					title:'平台提示',
					content:'暂不支持从小程序跳转公众号，是否需要复制公众号名称？',
					cancelText:'暂不需要',
					confirmText:'立即复制',
					success(res) {
						if(res.confirm) {
							uni.setClipboardData({
							    data: item.name,
							    success: function () {
							        uni.showToast({
							        	icon:'none',
										title:'已复制!'
							        });
									markOfficialAccountUsed(item.account_id).then(res=>{
										console.log('标记公众号使用成功:'+item.account_id);
									}).catch(error=>{
										console.log('标记公众号使用失败:'+item.account_id)
									})
							    }
							});
						}
					}
				})
			},
			initOfficialAccountList() 
			{
				uni.showLoading({
					title:'正在加载...'
				})
				getOfficialAccountList().then(res=>{
					uni.hideLoading()
					this.categoryList = res.data
					res.data.forEach(category=>{
						this.gridList = this.gridList.concat(category.items)
					})
				}).catch(error=>{
					uni.hideLoading()
				})
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.categoryMode.currentTab == cur) {
					return false;
				} else {
					this.categoryMode.currentTab = cur;
					this.checkCor();
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function(isScroll) {
				if (!isScroll) {
					this.categoryMode.isScroll = false;
					this.categoryMode.isTap = true;
					if (this.categoryMode.currentTab > 6) {
						this.categoryMode.scrollView_leftId = `left_${this.categoryMode.currentTab - 2}`;
					} else {
						this.categoryMode.scrollView_leftId = `left_0`;
					}
					this.categoryMode.scrollView_rightId = `right_${this.categoryMode.currentTab}`;
				} else {
					this.categoryMode.scrollView_leftId = `left_${this.categoryMode.currentTab}`;
				}
			},
			scroll(e) {
				//动画时长固定300ms
				if (!this.categoryMode.isScroll) {
					setTimeout(() => {
						this.categoryMode.isScroll = true;
					}, 150);
				} else {
					this.categoryMode.scrollTop = e.detail.scrollTop;
				}
			},
			linkage(e) {
				if (e.isLinkage && e.index != this.currentTab) {
					this.categoryMode.isTap = false;
					this.categoryMode.currentTab = e.index;
					this.checkCor(true);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
//分类视图模式
.tab-view {
	/* height: 100%; */
	width: 200rpx;
	position: fixed;
	left: 0;
	z-index: 10;
}

.tab-bar-item {
	width: 200rpx;
	height: 110rpx;
	background: #f6f6f6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #444;
	font-weight: 400;
}

.active {
	position: relative;
	color: #000;
	font-size: 30rpx;
	font-weight: 600;
	background: #fcfcfc;
}

.active::before {
	content: '';
	position: absolute;
	border-left: 8rpx solid #e41f19;
	height: 30rpx;
	left: 0;
}

/* 左侧导航布局 end*/

.right-box {
	width: 100%;
	position: fixed;
	padding-left: 220rpx;
	box-sizing: border-box;
	left: 0;
}

.page-view {
	width: 100%;
	overflow: hidden;
	padding-top: 20rpx;
	padding-right: 20rpx;
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
}

.class-item {
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
}

.class-name {
	font-size: 26rpx;
	font-weight: bold;
}

.g-container {
	/* padding-top: 20rpx; */
	display: flex;
	display: -webkit-flex;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}

.g-box {
	width: 33.3333%;
	text-align: center;
	padding-top: 40rpx;
}

.g-image {
	width: 120rpx;
	height: 120rpx;
}

.g-title {
	font-size: 22rpx;
}
//宫格视图模式
</style>
